<template>
    <div class="addMenus">
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="50%" center :before-close="handleClose">
            <div class="content">
                <el-form ref="formBox" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="姓名" prop="userName">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="userGender">
                        <el-radio-group v-model="form.userGender">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="年龄" prop="userAge">
                        <el-input v-model="form.userAge"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="userPhone">
                        <el-input v-model="form.userPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="userType">
                        <el-select v-model="form.userType" placeholder="请选择角色类型">
                            <el-option label="学生" value="1"></el-option>
                            <el-option label="老师" value="2"></el-option>
                            <el-option label="其他" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="form.isStatus"></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sub(0)">取 消</el-button>
                <el-button type="primary" @click="sub(1)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addUserInfo,updateUserInfo } from "../../api/user";
export default {
    data() {
        var uAge = (rule, value, callback) => {
            if (value == '' || isNaN(value) || value > 110 || value < 0) {
                callback(new Error('请输入正确的年龄'));
            } else {
                callback();
            }
        };
        var uPho = (rule, value, callback) => {
            if (value == '' || isNaN(value) || value.length != 11) {
                callback(new Error('请输入正确的电话'));
            } else {
                callback();
            }
        };
        return {
            centerDialogVisible: false,
            form: {
                userName: "",
                userGender: "",
                userAge: "",
                userPhone: "",
                userType: "",
                isStatus: true,
            },
            rules: {
                userName: [
                    {
                        required: true,
                        message: "请填写用户姓名",
                        trigger: "blur",
                    },
                ],
                userGender: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "blur",
                    },
                ],
                userAge: [
                    {
                        validator: uAge,
                        required: true,
                        trigger: "blur",
                    },
                ],
                userPhone: [
                    {
                        validator: uPho,
                        required: true,
                        trigger: "blur",
                    },
                ],
                userType: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "blur",
                    },
                ],
            },
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        userInfo: {
            type: Object,
            default: null,
        },
    },
    watch: {
        isShow(n, o) {
            this.centerDialogVisible = n;
        },
        userInfo(n, o) {
            if (n == null) {
                this.form = {
                    "userName": "",
                    "userGender": "",
                    "userAge": "",
                    "userPhone": "",
                    "userType": "",
                    "isStatus": true,
                };
            } else {
                n.isStatus = n.isStatus == "1" ? false : true
                this.form = n;
            }
        },
    },
    created() {
    },
    methods: {
        //提交关闭按钮
        sub(t) {
            if (t == 1) {
                this.$refs.formBox.validate((valid) => {
                    if (valid) {
                        //加载
                        const loading = this.$loading({
                            lock: true,
                            text: "Loading",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        this.form.isStatus = this.form.isStatus ? "0" : "1";
                        if (
                            this.form.userId == undefined ||
                            this.form.userId == ""
                        ) {
                            //添加
                            addUserInfo(this.form).then((res) => {
                                console.log("add", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        } else {
                            //更新
                            updateUserInfo(this.form).then((res) => {
                                console.log("update", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            } else {
                this.centerDialogVisible = false;
                this.$emit("show");
                console.log("no");
            }
        },
        handleClose(done) {
            this.centerDialogVisible = false;
            this.$emit("show");
        },
        //重置表单
        resetFun() {
            this.$refs.formBox.$el.reset();
            this.form.isStatus = true
            this.centerDialogVisible = false;
            this.$emit("show");
        },

    },
};
</script>

<style lang="scss" scoped>
.addMenus {
    .content {
        .el-form {
            .el-form-item:last-child {
                .el-tree {
                    max-height: 200px;
                    overflow: auto;
                    padding: 10px 0;
                }
            }
        }
    }
}
</style>
